<template>
    <f7-page class="main">
        <qm-currentcy-navbar title="设置">
            <template #nav-right>
                <!-- <f7-icon f7="ellipsis"></f7-icon> -->
            </template>
        </qm-currentcy-navbar>

        <f7-list class="qm-list list1">
            <f7-list-item title="账号设置" link="/ui/center/index4"> </f7-list-item>
            <f7-list-item title="通知提醒" link="#"> </f7-list-item>
            <f7-list-item title="关于我们" link="/setting/about"> </f7-list-item>
        </f7-list>
        <!-- <f7-list class="qm-list">
      <f7-list-item title="表情推荐">
        <qm-switch
          v-model="switch_1"
          active-color="#3385FF"
          inactive-color="#c3cbd6"
          slot="after"
          size="21"
        ></qm-switch>
      </f7-list-item>
      <f7-list-item title="文字特效">
        <qm-switch
          v-model="switch_2"
          active-color="#3385FF"
          inactive-color="#c3cbd6"
          slot="after"
          size="21"
        ></qm-switch>
      </f7-list-item>
    </f7-list> -->

        <f7-list class="operation-button">
            <f7-list-button title="退出登录" class="qm-list-button" @click="logout"></f7-list-button>
        </f7-list>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";
export default class instance extends controller {
    mixin () {
        return {
            data () {
                return {
                    switch_1: true,
                    switch_2: false,
                };
            },
            methods: {
                logout () {
                    this.$framework.account.logout();
                    // console.log("^-^");
                    // this.$dialog.confirm({title: "123", message: "222"}).then(()=>{
                    //   console.log("logout ……")
                    // })
                    // this.$dialog.alert({
                    //   message: "弹窗内容",
                    // });
                },
            },
        };
    }
}
</script>

<style lang="less" scoped>
/deep/.page-content {
    padding-top: calc(88px * var(--ratio));
}

.main {
    background: var(--color-fill-background);
}

.list1 {
    margin-top: 0;
}

.operation-button {
    margin-top: calc(60px * var(--ratio));
}
</style>
